<template>
	<view class="s-page">
		<!-- 配置参数部分 -->
		<view class="s-content-view">
			<view class="s-label-view">
				<text>参数配置</text>
			</view>
			<!-- 媒体类型 -->
			<view class="s-label-content">
				<text class="label-text">媒体类型：</text>
				<checkbox-group>
					<label @click="selectChange('mediaType', 'all')">
						<checkbox :checked="mediaType == 'all'" :style="checkStyle" />图片/视频
					</label>
					<label @click="selectChange('mediaType', 'video')">
						<checkbox :checked="mediaType == 'video'" :style="checkStyle" />视频
					</label>
					<label @click="selectChange('mediaType', 'photo')">
						<checkbox :checked="mediaType == 'photo'" :style="checkStyle" />图片
					</label>
				</checkbox-group>
			</view>
			<!-- 是否需要预览 -->
			<view class="s-label-content">
				<text class="label-text">是否需要预览：</text>
				<switch :checked="hasPreview" @change="switchChange($event, 'hasPreview')"
					:style="switchStyle"/>
			</view>
			<!-- 是否需要裁剪 -->
			<view class="s-label-content">
				<text class="label-text">是否需要裁剪：</text>
				<switch :checked="needCrop" @change="switchChange($event, 'needCrop')"
					:style="switchStyle"/>
			</view>
			<!-- 裁剪尺寸 -->
			<view class="s-label-content" v-if="needCrop">
				<text class="label-text">裁剪尺寸：</text>
				<input type="text" class="s-input"
					v-model="cropSize" placeholder="输入格式 0,0,200,200"/>
			</view>
			<!-- 是否多选 -->
			<view class="s-label-content">
				<text class="label-text">是否多选：</text>
				<switch :checked="multiSelect" @change="switchChange($event, 'multiSelect')"
					:style="switchStyle"/>
			</view>
			<!-- 最大选择数量 -->
			<view class="s-label-content">
				<text class="label-text">最大选择数量：</text>
				<input type="number" class="s-input"
					v-model="maxNum" placeholder="请输入最大选择数量"/>
			</view>
			<!-- 最小选择数量 -->
			<view class="s-label-content">
				<text class="label-text">最小选择数量：</text>
				<input type="number" class="s-input"
					v-model="minNum" placeholder="请输入最小选择数量"/>
			</view>
			<!-- 是否需要拍照 -->
			<view class="s-label-content">
				<text class="label-text">是否需要拍照：</text>
				<switch :checked="needCamera" @change="switchChange($event, 'needCamera')"
					:style="switchStyle"/>
			</view>
			<!-- 状态栏颜色 -->
			<view class="s-label-content">
				<text class="label-text">状态栏颜色：</text>
				<input type="text" class="s-input"
					v-model="statusBarColor" placeholder="请输入状态栏颜色"/>
			</view>
			<!-- 状态栏文字颜色 -->
			<view class="s-label-content">
				<text class="label-text">状态栏Mode：</text>
				<checkbox-group>
					<label @click="selectChange('statusBarMode', 'light')">
						<checkbox :checked="statusBarMode == 'light'" :style="checkStyle" />浅色
					</label>
					<label @click="selectChange('statusBarMode', 'drak')">
						<checkbox :checked="statusBarMode == 'drak'" :style="checkStyle" />深色
					</label>
				</checkbox-group>
			</view>
			<!-- 标题内容 -->
			<view class="s-label-content">
				<text class="label-text">标题内容：</text>
				<input type="text" class="s-input"
					v-model="titleText" placeholder="请输入标题内容"/>
			</view>
			<!-- 标题文字颜色 -->
			<view class="s-label-content">
				<text class="label-text">标题文字颜色：</text>
				<input type="text" class="s-input"
					v-model="titleTextColor" placeholder="请输入标题文字颜色"/>
			</view>
			<!-- 标题栏背景颜色 -->
			<view class="s-label-content">
				<text class="label-text">标题背景颜色：</text>
				<input type="text" class="s-input"
					v-model="titleBgColor" placeholder="请输入标题背景颜色"/>
			</view>
			<!-- 是否显示右侧按钮 -->
			<view class="s-label-content">
				<text class="label-text">显示右侧按钮：</text>
				<switch :checked="rightTitleVisibility" @change="switchChange($event, 'rightTitleVisibility')"
					:style="switchStyle"/>
			</view>
			<!-- 右侧文字背景颜色 -->
			<view class="s-label-content">
				<text class="label-text">右侧文字背景：</text>
				<input type="text" class="s-input"
					v-model="rightTitleTextColor" placeholder="请输入右侧文字背景颜色"/>
			</view>
			<!-- 右侧文字内容 -->
			<view class="s-label-content">
				<text class="label-text">右侧文字内容：</text>
				<input type="text" class="s-input"
					v-model="rigntTitleText" placeholder="请输入右侧文字内容"/>
			</view>
			<!-- 确定按钮文字内容 -->
			<view class="s-label-content">
				<text class="label-text">确定按钮文字：</text>
				<input type="text" class="s-input"
					v-model="sureBtnText" placeholder="请输入确定按钮文字"/>
			</view>
			<!-- 按钮文字颜色 -->
			<view class="s-label-content">
				<text class="label-text">按钮文字颜色：</text>
				<input type="text" class="s-input"
					v-model="sureBtnTextColor" placeholder="请输入确定按钮文字颜色"/>
			</view>
			<!-- 按钮背景颜色 -->
			<view class="s-label-content">
				<text class="label-text">按钮背景颜色：</text>
				<input type="text" class="s-input"
					v-model="sureBtnBgColor" placeholder="请输入确定按钮背景颜色"/>
			</view>
			<!-- 底部背景颜色 -->
			<view class="s-label-content">
				<text class="label-text">底部背景颜色：</text>
				<input type="text" class="s-input"
					v-model="sureBtnLayoutBgColor" placeholder="请输入底部背景颜色"/>
			</view>
			<!-- 每行展示数量 -->
			<view class="s-label-content">
				<text class="label-text">每行展示数量：</text>
				<input type="text" class="s-input"
					v-model="listSpanCount" placeholder="请输入每行展示数量"/>
			</view>
			<!-- 缩略图快加载 -->
			<view class="s-label-content">
				<text class="label-text">缩略图快加载：</text>
				<switch :checked="quickLoadVideoThumb" @change="switchChange($event, 'quickLoadVideoThumb')"
					:style="switchStyle"/>
			</view>
			<!-- 是否返回第一帧图片 -->
			<view class="s-label-content">
				<text class="label-text">第一帧图片：</text>
				<switch :checked="firstPhoto" @change="switchChange($event, 'firstPhoto')"
					:style="switchStyle"/>
			</view>
			<view class="s-button-view">
				<button class="s-button" type="primary" @click="selectMedia">媒体选择</button>
			</view>
			<!-- 返回结果 -->
			<view class="s-result-view" v-if="resultValue">
				<text>{{resultValue}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	// 获取 module 
	// #ifdef APP-PLUS
	let JMedia = uni.requireNativePlugin('J-MediaModule')
	// #endif
	export default {
		data() {
			return {
				mediaType: 'all',
				hasPreview: true,
				multiSelect: true,
				maxNum: 9,
				minNum: 1,
				needCamera: false,
				statusBarColor: '#333333',
				statusBarMode: 'drak',
				titleText: '选择',
				titleTextColor: '#ffffff',
				titleBgColor: '#333333',
				rightTitleVisibility: true,
				rightTitleTextColor: '#ffffff',
				rigntTitleText: '所有文件',
				sureBtnText: '完成',
				sureBtnTextColor: '#ffffff',
				sureBtnBgColor: '#007aff',
				sureBtnLayoutBgColor: '#333333',
				listSpanCount: 3,
				needCrop: false,
				cropSize: '1,1,200,200',
				quickLoadVideoThumb: false,
				firstPhoto: true,
				resultValue: ''
			}
		},
		computed: {
			switchStyle() {
				return 'margin-left: -12upx;transform:scale(0.7)'
			},
			checkStyle() {
				return 'transform:scale(0.7)'
			}
		},
		methods: {
			/**
			 * 打开相机
			 */
			selectMedia() {
				let tempSize = {}
				if (this.needCrop) {
					if (!this.cropSize)
						return uni.showToast({
							title: '请输入裁剪尺寸'
						})
					let cropSizes = this.cropSize.split(',')
					tempSize['aspectX'] = cropSizes[0]
					tempSize['aspectY'] = cropSizes[1]
					tempSize['outputX'] = cropSizes[2]
					tempSize['outputY'] = cropSizes[3]
				}
				JMedia.selectMedia({
					// 可选择的媒体类型，all-图片/视频，video-仅选择视频，photo-仅选择图片
					// 默认值：all
					mediaType: this.mediaType,
					// 是否需要预览，默认值：true
					hasPreview: this.hasPreview,
					// 是否需要裁剪图片，注：只有图片才生效，默认值：false
					needCrop: this.needCrop,
					// 裁剪大小，只有needCrop为true时生效，默认值：1,1,200,200
					// cropSize: {
					// 	aspectX: 1,			// 左上角x坐标
					// 	aspectY: 1,			// 左上角y坐标
					// 	outputX: 200,		// 右下角x坐标（可理解为宽）
					// 	outputY: 200		// 右下角y坐标（可理解为高）
					// },
					cropSize: tempSize,
					// 是否多选，默认值：true
					multiSelect: this.multiSelect,
					// 最大选择数量，默认值：9
					maxNum: this.maxNum,
					// 最小选择数量，默认值：0
					minNum: this.minNum,
					// 是否需要拍照（单选是生效），默认值：false
					needCamera: this.needCamera,
					// 状态栏颜色，默认值：#333333
					statusBarColor: this.statusBarColor,
					// 状态栏Mode，就是状态栏文字的颜色，默认值：light
					statusBarMode: this.statusBarMode,
					// 顶部导航栏文字，默认值：选择
					titleText: this.titleText,
					// 顶部导航栏文字颜色，默认值：#ffffff
					titleTextColor: this.titleTextColor,
					// 顶部导航栏背景颜色，默认值：#333333
					titleBgColor: this.titleBgColor,
					// 是否显示右侧按钮，默认值：true
					rightTitleVisibility: this.rightTitleVisibility,
					// 导航栏右侧文字颜色，默认值：#ffffff
					rightTitleTextColor: this.rightTitleTextColor,
					// 导航栏右侧文字内容，默认值：所有文件
					rigntTitleText: this.rigntTitleText,
					// 确定按钮文字，默认值：完成
					sureBtnText: this.sureBtnText,
					// 确定按钮文字颜色，默认值：#ffffff
					sureBtnTextColor: this.sureBtnTextColor,
					// 确定按钮背景颜色，默认值：#007aff
					sureBtnBgColor: this.sureBtnBgColor,
					// 确认按钮所在局域的背景颜色，默认值：#333333
					sureBtnLayoutBgColor: this.sureBtnLayoutBgColor,
					// 每行展示数量，默认值：3
					listSpanCount: this.listSpanCount,
					// 是否需要快速加载视频缩略图，默认值：true
					quickLoadVideoThumb: this.quickLoadVideoThumb,
					// 缓存文件输出路径，没有特殊要求可以不填
					// 建议使用uniapp或plus相关方法获取指定
					// fileCachePath: '/storage/emulated/0/789/',
					// 选择视频后是否返回第一帧图片，
					// 注：如果设置为true返回值是一个json字符串，需要自己JSON.parse一下
					// 默认值：false
					firstPhoto: this.firstPhoto
				}, res => {
					// res.flag 为true，代表打开成功，false为失败
					// res.msg 成功失败的msg
					this.resultValue += JSON.stringify(res) + '\n'
				})
			},
			selectChange(type, value) {
				this[type] = value
			},
			switchChange(e, type) {
				this[type] = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}
	// 主内容
	.s-content-view {
		padding: 32upx;
		
		.s-input {
			height: 80upx;
			border-bottom: 1upx solid #e1e1e1;
		}
	}
	
	.s-label-view {
		border-left: solid #007aff 6upx;
		margin-bottom: 26upx;
		text {
			font-size: 30upx;
			color: #888888;
			padding-left: 16upx;
		}
	}
	// 标签和内容
	.s-label-content {
		display: flex;
		align-items: center;
		padding-bottom: 16upx;
		.label-text {
			width: 230upx;
			font-size: 30upx;
			color: #343434;
		}
		checkbox-group, input {
			flex: 1;
		}
	}
	// 按钮组
	.s-button-view {
		display: flex;
		padding-top: 16upx;
		.s-button {
			width: 100%;
		}
	}
	
	.s-button {
		height: 70upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30upx;
	}
	
	// 返回结果
	.s-result-view {
		margin-top: 26upx;
		border: 1upx solid #e1e1e1;
		border-radius: 14upx;
		padding: 14upx;
		background-color: #e9e9e9;
		text {
			font-size: 30upx;
			color: #636463;
			word-wrap: break-word;
			word-break: break-all;
		}
	}
</style>